var vm;
var cusId=sessionStorage.getItem("cusId");
var eventHub = new Vue();


$(function () {
    vm = new Vue({

        el: '#rrapp',
        data: {
            tabsShow:true,
            detail:false,
            add:false,
            clicktag:0,//防重复提交
            query:{cusId:cusId,startDate:'',endDate:'',type:'',csName:''},
            lid:'',
            addRm:''
        },
        methods: {
            query01:function () {
                vm.reload();
            },
            //重新加载列表
            reload: function () {
                cusId=sessionStorage.getItem("cusId");
                console.log("hisRemark----------> cusId:"+cusId);
                $("#jqGrid").setGridParam({
                    postData: {
                        cusId:cusId,
                        startDate : vm.query.startDate,
                        endDate : vm.query.endDate,
                        type : vm.query.type,
                        csName :vm.query.csName
                    },
                    page:1,
                }).trigger("reloadGrid");
            },
            backToList:function(){
                vm.detail=false;
                vm.tabsShow=true;
                vm.add=false;
                // $("#hp").css("opacity","1");
            },
            reloadDetail:function (cusId){
                $("#jqGridDetail").setGridParam({
                    postData: {
                        id:cusId
                    },
                    page:1
                }).trigger("reloadGrid");
            },
            addBz:function(){
                if (vm.clicktag == 0) {
                    vm.clicktag = 1;
                    setTimeout(function () { vm.clicktag = 0 }, 5000);
                }
                else{
                    alert('请勿频繁点击！');
                    return false;
                }
                if(!vm.addRm){
                    alert("备注不能为空");
                    return false;
                }
                var data= {
                    id:vm.lid.toString(),//call_list的id
                    remark:vm.addRm
                }
                $.ajax({
                    type: "post",
                    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                    url: "../homePage/addReForCall",
                    data: data,
                    dataType: "json",
                    success: function (r) {
                        console.log(r);
                        if (r.code == 0) {
                            window.location.href = "../homePage/viewDetail.html";
                            return false;
                        }
                    },
                    error:function (r) {
                        alert("操作失败,请刷新重试");
                        console.log(r)
                    }
                });

            },
        }
    });


    $("#jqGrid").jqGrid({
        url: '../homePage/queryCusList',
        datatype: "json",
        colModel: [
            {label: 'id', name: 'id', width: 40,key: true,hidden:true },
            {label: '通话时间', name: 'startTime', width: 30},
            {label: '通话类型', name: 'type', width: 20 ,formatter:callType},
            {label: '客服人员', name: 'cusName', width: 20 },
            {label: '是否投诉', name: 'crType', width: 20,formatter:callRmarksType},
            {label: '签入账号', name: 'callAccount', width: 30},
            {label: '通话备注', name: 'remark', width: 30},
            {label: '操作', name: 'id', width: 20,
                formatter: function (value, options, row) {
                        return  '<a class="btn btn-xs btn-primary" href="javascript:void(0);" '+
                            'onclick="addBzById(\'' + options.rowId + '\')">添加</a>'+
                            '<a class="btn btn-xs btn-primary" href="javascript:void(0);" ' +
                            'onclick="getBzById(\'' + options.rowId + '\')">查看</a>';
                }
            }
        ],
        viewrecords: true,
        height: 500,
        rowNum: 10,
        rowList: [10, 30, 50],
        rownumbers: true,
        rownumWidth: 55,
        autowidth: true,
        multiselect: false,
        pager: "#jqGridPager",
        postData: {
            cusId:cusId,
            startDate : vm.query.startDate,
            endDate : vm.query.endDate,
            type : vm.query.type,
            csName :vm.query.csName
        },
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
            $("#jqGridDetail").jqGrid("setGridWidth",$(window).width());
        }
    });

    $("#jqGridDetail").jqGrid({
        url: '../homePage/getBzById',
        datatype: "json",
        colModel: [
            {label: 'bid', name: 'bid', key: true,hidden:true },
            {label: '备注时间', name: 'editTime', width: 30 },
            {label: '客服人员', name: 'csName', width: 20},
            {label: '备注信息', name: 'remark', width: 100}

        ],
        viewrecords: true,
        height: 500,
        rowNum: 10,
        rowList: [10, 20, 30],
        rownumbers: true,
        rownumWidth: 55,
        autowidth: true,
        multiselect: false,
        pager: "#jqGridPagerDetail",
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGridDetail").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
            $("#jqGridDetail").jqGrid("setGridWidth",$(window).width());
        }
    });


});

function getBzById(id) {
    vm.detail=true;
    vm.tabsShow=false;
    vm.reloadDetail(id);
};

function addBzById(id) {
    vm.add=true;
    vm.tabsShow=false;
    vm.lid=id;
};

